<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市区</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<style> body { background: #Fff; } .overlay, .overlay select, .overlay .form-dropdown { width: 142px; }  </style>
	</head>

	<body>
		<div class="form" style="padding:20px 40px;">
			<form class="block-form" id="commentForm">
				<input type="hidden" value="" name="id"  id="aid"/>
				<div class="select-city">
					
					<div>
						<label><span class="red">*</span>省份：</label>
						<div class="overlay">
							<!--这个是用来存放选中的select的值的-->
							<input type="hidden" value="浙江省" class="form-select-value" id="provname" />
							<div class="dropdown">
								<button class="dropdown-toggle form-dropdown" type="button">
					                                <span class="value text-ellipsis pro_provincevalue">浙江省</span>
					                                <span class="caret"></span>
					            </button>
								<ul class="select select_prov none"></ul>
								<select class="prov hidden none " data-value="浙江省" style="margin-top:20px;"></select>
							</div>
						</div>	
					</div>
					
					<div style="margin-top:13px;">
						<label><span class="red">*</span>城市：</label>
						<div class="overlay">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value" id="cityname" />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value text-ellipsis pro_cityvalue">选择城市</span>
				                                <span class="caret"></span>
				                           </button>

							<ul class="select  select_city none"></ul>
							<select class="city hidden none " style="margin-top:20px;"></select>
						</div>
					</div>
					</div>
					
					<div style="margin-top:13px;"> 
						<label><span class="red">*</span>地区：</label>
						<div class="overlay">
						<!--这个是用来存放选中的select的值的-->
						<input type="hidden" value="" class="form-select-value" id="districtname" />
						<div class="dropdown">
							<button class="dropdown-toggle form-dropdown" type="button">
				                    <span class="value text-ellipsis pro_cityvalue">选择地区</span>
				                    <span class="caret"></span>
				            </button>

							<ul class="select  select_district none"></ul>
							<select class="district hidden none " style="margin-top:20px;"></select>
						</div>
					</div>
					<input type="text" class="proarea" name="proarea" id="proarea" style="visibility: hidden; width:0px;" />
				</div>
					</div>
					
					

				<div class="text-center" style="margin-top:40px;">
					<input type="submit" value="保存" class="search-input-button" id="subButton" />
					<input type="button" value="返回" class="search-input-button bgblue" id="backButton" style="margin-right:0px;" />
				</div>
			</form>
		</div>

		<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.cxselect.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$.validator.setDefaults({
				submitHandler: function() {
					//这里放验证成功之后要执行的函数

				}
			});

			//这里是验证省市
			$.validator.addMethod("isareaEmpty", function(value, element) {
				if($('#provname').val() && $('#cityname').val() && $('#districtname').val() ) {
					return true;
				}else {
					return false;
				}
			}, "<i class=\" icon icon_error_red \"></i>请选择省市！");

			$(document).ready(function() {
				$("#commentForm").validate({
					rules: {
						proarea: {
							isareaEmpty: true,
						},
					},
					messages: {

					},
					errorPlacement: function(error, element) {
						error.appendTo('<i class=\" icon icon_error_red \"></i>').appendTo(element.parent());
					},
				});
			});

			$(function() {
				var staticPath = 'js/cityData.min.json'
				selectObj.showChangeValue();

				/*调用省市区*/
				$.cxSelect.defaults.url = productObj.staticPath;
				$.cxSelect.defaults.emptyStyle = 'none';
				var data = $('.select-city').cxSelect({
					url:staticPath,
					/* 如果服务器不支持 .json 类型文件，请将文件改为 .js 文件*/
					selects: ['prov', 'city','district'],
					/*数组，请注意顺序*/
					emptyStyle: '',
					'htmlTagName': 'li',
					required: 'false',
				});

			})
		</script>

	</body>

</html>